<template>
  <div>
    <div>
      <van-nav-bar title="电影列表" left-arrow @click-left="back"/>
    </div>

    <div class="category-selector">
      <!-- 排序方式 -->
      <ul class="sortType">
        <li v-for="(item, index) in sortTypeTag" :key="index">
          <a href="javascript:void(0);" @click="changeSortType(item.id, index)" :class="{ active: sortIsActive == index }">
            {{ item.name }}
          </a>
        </li>
      </ul>

      <!-- 国家地区 -->
      <ul class="Region">
        <li v-for="(item, index) in regionTag" :key="index">
          <a href="javascript:void(0);" @click="changeRegion(item.id, index)" :class="{ active: regionIsActive == index }">
            {{ item.name }}
          </a>
        </li>
      </ul>

      <!-- 电影类型 -->
      <ul class="Type">
        <li v-for="(item, index) in typeTag" :key="index">
          <a href="javascript:void(0);" @click="changeType(item.id, index)" :class="{ active: typeIsActive == index }">
            {{ item.name }}
          </a>
        </li>
      </ul>

      <!-- 上映年份 -->
      <ul class="movieDate">
        <li v-for="(item, index) in movieDateTag" :key="index">
          <a href="javascript:void(0);" @click="changeMovieDate(item.id, index)" :class="{ active: dateIsActive == index }">
            {{ item.name }}
          </a>
        </li>
      </ul>

      <!-- 观看类型 -->
      <ul class="watchType">
        <li v-for="(item, index) in watchTypeTag" :key="index">
          <a href="javascript:void(0);" @click="changeWatchType(item.id, index)" :class="{ active: watchTypeIsActive == index }">
            {{ item.name }}
          </a>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import { Toast } from 'vant';
// 事件总线，组件内通信，用于处理当电影分类组件中选项改变时，在电影列表组件内改变对应参数调用后台接口
import { EventBus } from "../../../../event-bus";

export default {
  data () {
    return {
      // 排序方式
      sortTypeTag: [
        { name: "推时间", id: 1 },
        { name: "推评分", id: 2 },
        { name: "喜欢数", id: 3 },
        { name: "新上线", id: 4 }
      ],

      // 国家地区
      regionTag: [
        { name: "全部地区", id: 0 },
        { name: "华语", id: 1 },
        { name: "港台", id: 91 },
        { name: "日韩", id: 92 },
        { name: "东南亚", id: 93 },
        { name: "美国", id: 8 },
        { name: "其它", id: 9 }
      ],

      // 电影类型
      typeTag: [
        { name: "全部类型", id: 0 },
        { name: "喜剧", id: 11 },
        { name: "爱情", id: 21 },
        { name: "动作", id: 31 },
        { name: "恐怖", id: 41 },
        { name: "动画", id: 51 },
        { name: "其它", id: 6 }
      ],

      // 上映年份
      movieDateTag: [
        { name: "全部年份", id: 0 },
        { name: "2020-2010", id: 1 },
        { name: "2009-2000", id: 2 },
        { name: "1999-1990", id: 3 },
        { name: "其它", id: 4 }
      ],

      // 观看类型
      watchTypeTag: [
        { name: "全部方式", id: 0 },
        { name: "可跳转", id: 1 },
        { name: "有下载链接", id: 2 },
        { name: "仅推荐", id: 3 }
      ],

      // 默认分类
      sortType: 1,
      regionId: 0,
      type: 0,
      movieDate: 0,
      watchType: 0,

      sortIsActive: 0,
      regionIsActive: 0,
      typeIsActive: 0,
      dateIsActive: 0,
      watchTypeIsActive: 0,
    }
  },

  methods: {
    // 改变排序方式
    changeSortType(id, index) {
      if (this.sortType != id) {
        this.sortType = id;
        EventBus.$emit("getMovie", this.sortType, this.regionId, this.type, this.movieDate, this.watchType);
        // 在这里将sortIsActive改为各标签对应的index值，实现动态改变class
        this.sortIsActive = index;
        console.log(this.sortType);
      }
    },
    
    // 改变国家地区
    changeRegion(id, index) {
      if (this.regionId != id) {
        this.regionId = id;
        EventBus.$emit("getMovie", this.sortType, this.regionId, this.type, this.movieDate, this.watchType);
        // 在这里将sortIsActive改为各标签对应的index值，实现动态改变class
        this.regionIsActive = index;
        console.log(this.regionId);        
      }
    },

    // 改变电影类型
    changeType(id, index) {
      if (this.type != id) {
        this.type = id;
        EventBus.$emit("getMovie", this.sortType, this.regionId, this.type, this.movieDate, this.watchType);
        // 在这里将sortIsActive改为各标签对应的index值，实现动态改变class
        this.typeIsActive = index;
        console.log(this.type);        
      }

    },

    // 改变电影日期
    changeMovieDate(id, index) {
      if (this.movieDate != id) {
        this.movieDate = id;
        EventBus.$emit("getMovie", this.sortType, this.regionId, this.type, this.movieDate, this.watchType);
        // 在这里将sortIsActive改为各标签对应的index值，实现动态改变class
        this.dateIsActive = index;
        console.log(this.movieDate);
      }
    },

    // 改变观看类型
    changeWatchType(id, index) {
      if (this.changeSortType != id) {
        this.watchType = id;
        EventBus.$emit("getMovie", this.sortType, this.regionId, this.type, this.movieDate, this.watchType);
        // 在这里将sortIsActive改为各标签对应的index值，实现动态改变class
        this.watchTypeIsActive = index;
        console.log(this.watchType);        
      }
    },

    // 返回上一级
    back() {
      Toast('返回')
    }
  }
};
</script>

<style scoped>
.category-selector {
	padding: 0.5rem 0.3rem;
}

/* 超出部分滚动 */
ul {
  overflow-x: auto;
  overflow-y: hidden;
  display: -webkit-box;
  -webkit-overflow-scrolling: touch;
  margin: 0.5rem 0.5rem
}

/* 隐藏滚动条 */
ul::-webkit-scrollbar {
  display: none;
}


ul>li>a {
  height: 2rem;
  line-height: 2rem;
  padding: 0.8rem 1rem;
}

ul>li>a:link {
	font-size: 0.9rem;
	color: #707070;
}

ul>li>a:hover {
	color: #ed9d36;
}

ul>li>.active {
  border-radius: 45%;
	background-color: #f4f4f4;
  color: #ed9d36 !important;
}
</style>
